<template>
	<view>

		<view class="cloud_two"></view>
		<view class="cloud_three"></view>

		<canvas v-if="displayCanvas" id="canvas" ref="canvas" type="2d" canvas-id="canvas" />

		<view v-if="!heartShow" class="unpack" @click="carryOut">点击开启</view>
		<view class="throb" v-if="heartShow">
			<view v-for="(item,index) in containers" :key="index" :class="['container', item.class]">
				<view v-for="box in item.boxes" :key="box" :style="'background-color: ' + box"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ConfettiEjector,
		CanvasRender,
		CustomShape,
		Confetti
	} from 'confetti-ts-canvas'

	const canvasRender = new CanvasRender();


	export default {
		data() {
			return {
				heartShow: false,
				containers: [{
						class: 'one',
						boxes: ['#8e1a19', '#ac0500', '', '', '', '#f73f0c', '#fa5f27']
					},
					{
						class: 'two',
						boxes: ['#8e1a19', '#ac0500', '#8e1a19', '#f73f0c', '', '#f34f2b', '#f77c2a', '#df351f',
							'#f77c2a'
						]
					},
					{
						class: 'three',
						boxes: ['#740100', '#8e0500', '#740100', '#8e1918', '#ca1300', '#df351f', '#f34f2b', '#f77c2a',
							'#fa5f27'
						]
					},
					{
						class: 'four',
						boxes: ['#4b0000', '#690100', '#4b0000', '#8e0f0b', '#bf1000', '#f84010', '#f04222', '#fa5724',
							'#8e1918'
						]
					},
					{
						class: 'five',
						boxes: ['#451312', '#5a0100', '#840e0c', '#a51d1a', '#ed2805', '#d9321e', '#f44622']
					},
					{
						class: 'six',
						boxes: ['#3b0000', '#5d1a1b', '#a80700', '#8e1a19', '#b90a00']
					},
					{
						class: 'seven',
						boxes: ['#3d0000', '#551415', '#670100']
					},
					{
						class: 'eight',
						boxes: ['#340000']
					}
				],
				displayCanvas: true,
				canvasSize: {
					width: 0,
					height: 0,
				},
				canvas: null,
			}
		},
		mounted() {
			this.initRenders();
		},
		methods: {
			carryOut() {
				this.sides()
				this.asyncBoom()
				// this.btnShow = false
				this.heartShow = true;
				// setTimeout(() => {
				// 	this.heartShow = true;
				// }, 500); // 延迟 2000 毫秒（即 2 秒）后设置 this.heartShow 为 true
			},
			async initRenders() {
				const painter = await this.getPainter();
				const rect = await this.getCanvasSize();
				const g = uni.createCanvasContext("canvas");
				const {
					width,
					height
				} = rect;
				this.canvasSize.width = width;
				this.canvasSize.height = height;
				canvasRender.init(
					painter, {
						width: rect.width,
						height: rect.height,
					}
				);
			},
			getCanvasSize() {
				return new Promise((r, e) => {
					uni.createSelectorQuery().select("#canvas").boundingClientRect((_) => {
						r(_);
					}).exec();
				});
			},
			/*两边*/
			sides() {
				const leftPao = new ConfettiEjector(canvasRender, {
					limitAngle: [-90, 0],
					count: 60,
				});
				const rightPao = new ConfettiEjector(canvasRender, {
					limitAngle: [180, 270],
					count: 60,
				});
				const leftBoom = leftPao.create({
					x: -this.canvasSize.width / 2 + 20,
					y: -200,
					clampforce: [10, 60],
					radius: 10,
				});
				const rightBoom = rightPao.create({
					x: this.canvasSize.width / 2 - 20,
					y: -200,
					clampforce: [10, 60],
					radius: 10,
				});
				leftPao.fire(leftBoom);
				rightPao.fire(rightBoom);
			},

			/*异步*/
			asyncBoom() {
				for (let i = 0; i < 3; i++) {
					setTimeout(() => {
						this.common();
					}, i * 1000);
				}
			},

			/*普通*/
			common() {
				const pao = new ConfettiEjector(canvasRender, {
					limitAngle: [225, 315], //喷发角度区间[-∞,+∞]
					count: 100, //喷发纸片数量
				});
				const boom = pao.create({
					x: Math.random() * (this.canvasSize.width * .5),
					y: Math.random() * (this.canvasSize.height * .5), //喷发位置
					clampforce: [20, 60], //喷发力度
					radius: 10, //纸片大小
				});
				pao.fire(boom);
			},
			async getPainter() {
				return new Promise(async (r) => {
					const query = uni.createSelectorQuery();
					query.select('#canvas')
						.fields({
							node: true,
							size: true
						}).exec(async (res) => {
							//r(uni.createCanvasContext('myCanvas', this));
							const canvas = res[0].node;
							if (canvas) r(canvas.getContext('2d'));
							if (canvas?.width || canvas?.height) {
								// const dpr = (await uni.getSystemInfo())[1].pixelRatio;
								canvas.width = res[0].width // * dpr;
								canvas.height = res[0].height // * dpr;
							}
							this.canvas = canvas;
							r(uni.createCanvasContext('canvas', this));
						})
				})
			},
		}
	}
</script>

<style>
	#canvas {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0px;
		left: 0px;
		pointer-events: none;
		z-index: 999999;
	}

	.text-wrapper {
		color: #999;
	}

	.danger {
		color: orangered;
	}

	button {
		background: #ffffff;
		border: none;
	}

	page {
		background: linear-gradient(-180deg, #fde6e4 0%, #f3c1d0 100%);
		display: flex;
		/* 使用flex布局 */
		justify-content: center;
		/* 水平居中对齐 */
		align-items: center;
		/* 垂直居中对齐 */
		height: 100vh;
		animation: sky 10s linear infinite;
	}

	/* 定义一个天空动画 */
	@keyframes sky {
		0% {
			background: linear-gradient(-180deg, #fde6e4 0%, #f3c1d0 100%);
		}

		100% {
			background: linear-gradient(-180deg, #fde6e4 0%, #f3c1d0 100%);
		}
	}


	.cloud_two {
		width: 300%;
		height: 450px;
		margin: 0 auto;
		background: url(https://s3.bmp.ovh/imgs/2023/06/10/dc7235f6f0a978b5.png) repeat-x;
		position: fixed;
		left: 0;
		top: -200upx;
		animation: cloud 20s linear infinite;
	}

	.cloud_three {
		width: 300%;
		height: 450px;
		margin: 0 auto;
		background: url(https://s3.bmp.ovh/imgs/2023/06/10/8201e7f468f3570c.png) repeat-x;
		position: fixed;
		left: 0;
		top: -200upx;
		animation: cloud 40s linear infinite;
	}

	@keyframes cloud {
		from {
			left: 0;
		}

		to {
			left: -200%;
		}
	}

	.container {
		display: flex;
		justify-content: center;
	}


	@keyframes rotateAnimation {
		0% {
			transform: rotateY(0deg);
		}

		100% {
			transform: rotateY(360deg);
		}
	}

	.one {
		animation: rotateAnimation 2s forwards;
	}

	.two {
		animation: rotateAnimation 3s forwards;
	}

	.three {
		animation: rotateAnimation 4s forwards;
	}

	.four {
		animation: rotateAnimation 5s forwards;
	}

	.five {
		animation: rotateAnimation 4s forwards;
	}

	.six {
		animation: rotateAnimation 3s forwards;
	}

	.seven {
		animation: rotateAnimation 2s forwards;
	}

	.eight {
		animation: rotateAnimation 1s forwards;
	}

	.container view {
		width: 60upx;
		height: 60upx;
	}

	.throb {
		animation: heartbeat-scale 1s infinite;
	}

	@keyframes heartbeat-scale {
		0% {
			transform: scale(1);
		}

		25% {
			transform: scale(1.1);
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	/* 打开 */
	.unpack {
		padding: 40upx 250upx;
		border-radius: 20upx;
		background-color: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		/* 添加阴影效果 */
		cursor: pointer;
	}
</style>